<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>12.组件的介绍</title>
  </head>
  <body>
    <div
      id="charts1"
      style="width: 600px; height: 400px; border: 1px solid #f00"
    ></div>
    <script src="./echarts/echarts.min.js"></script>
    <script>
      // 1. 获取页面中的标签对象并初始化
      const myChart = echarts.init(document.getElementById('charts1'));

      // const option = {}
      // 2. 根据参数绘制图形
      myChart.setOption({
        title: {
          text: '数据可视化',
          subtext: '这是数据可视化子标题',
        },
        xAxis: {
          // data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
          type: 'category', // 根据分类进行呈现
        },
        yAxis: {
          // data:[100,200,300,400,500,600,700,800,900,1000,1100,1200]
        },
        dataset: {
          source: [
            ['Jan', 34, 20, '小米', 52],
            ['Feb', 28, 14, '华为', 54],
            ['Mar', 45, 32, '中兴', 50],
            ['Apr', 69, 46, 'OPPO', 42],
            ['May', 39, 24, 'VIVO', 43],
            ['Jun', 43, 23],
            ['Jul', 33, 23],
            ['Aug', 23, 13],
            ['Sep', 23, 16],
            ['Oct', 33, 20],
            ['Nov', 39, 24],
            ['Dec', 32, 35],
          ],
        },
        legend: {
          // 图例组件 用于展示series中的图形名称
          data: [
            {
              name: '饼状图',
              // 强制设置图形为圆。
              icon: 'circle',
              // 设置文本为红色
              textStyle: {
                color: 'purple',
              },
            },
            '折线图',
            { name: '柱状图', icon: 'circle' },
          ],
          left: 100,
        },
        tooltip: {},
        dataZoom: [
          {
            show: true,
            start: 30,
            end: 70,
          },
        ],
        toolbox: {
          // 工具盒或工具箱组件
          feature: {
            dataZoom: {
              yAxisIndex: 'none',
            },
            restore: {},
            saveAsImage: {},
          },
        },
        series: [
          {
            name: '柱状图',
            type: 'bar',
            // data: [20, 14, 32, 46, 24, 23, 23, 13, 26, 20, 24, 15]
            encode: { x: 0, y: 2 },
          },
          {
            name: '折线图',
            type: 'line',
            // data: [34, 28, 45, 69, 39, 43, 33, 23, 23, 33, 39, 22]
            encode: { x: 0, y: 1 },
          },

          {
            name: '饼状图',
            type: 'pie',
            center: ['75%', 90],
            radius: 55,
            // data: [
            //   { name: '小米', value: 52 },
            //   { name: '华为', value: 54 },
            //   { name: '中兴', value: 50 },
            //   { name: 'OPPO', value: 42 },
            //   { name: 'ViVo', value: 43 }
            // ]
            encode: { itemName: 3, value: 4 },
          },
        ],
      });
    </script>
  </body>
</html>
